<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>keep-alive的</title>
  <script src="./vue.js"></script>
  <style>
    ul, li {
      list-style: none;
    }
    ul {
      display: flex;
    }
    li {
      border: 1px solid pink;
      padding: 5px 8px;
      cursor: pointer;
    }
  </style>
</head>
<body>
  <div id="app">
    <!-- 动态组件 -->
    <ul>
      <li @click="componentId = 'index'">首页</li>
      <li @click="componentId = 'list'">列表页</li>
      <li @click="componentId = 'art'">详情页</li>
    </ul>
    <keep-alive>
      <!-- 失活的组件将会被缓存！-->
      <component :is="componentId"></component>
    </keep-alive>
  </div>
</body>
</html>
<script>
  // 当在这些组件之间切换的时候，你有时会想保持这些组件的状态，以避免反复重渲染导致的性能问题
  // 定义组件
  Vue.component('index', {
    template: `<span>这是首页的内容</span>`,
    created() {
      // 故意制造一个错误
      throw new Error('index组件created出错了')
    }
  })
  Vue.component('list', {template: `<span>这是列表页的内容</span>`})
  Vue.component('art', {
    template: `<span>~~~！详情页页~~~~-</span>`,
    // 生命周期钩子 被 keep-alive 缓存的组件激活时调用
    activated () {
      console.log('art组件激活了')
    },
    // 被 keep-alive 缓存的组件停用时调用
    deactivated () {
      console.log('art组件失活了')
    }
  })
  var vm = new Vue({
    el: '#app',
    data: {
      componentId: 'index'
    },
    // 组件出错的时候
    errorCaptured (err) {
      console.log(err)
    }
  })
  // 我们的vue中生命周期有11个 每个组件都有11个生命周期
</script>